<!--
 * @Author: jqm123 2289662078@qq.com
 * @Date: 2025-08-12 16:54:32
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-08-12 16:58:20
 * @FilePath: /bmxt/src/components/home/ActivityList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const props = defineProps({
  data_list: Array,
});
const emit = defineEmits(["loadMore"]);

watch(
  () => props.data_list,
  (newValue, oldValue) => {
    activity_list.value = newValue;
  },
  {
    deep: true,
  }
);

//获取全部活动
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

//list参数
const activity_list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  // 异步更新数据
  loading.value = true;

  if (activity_list.value.length >= total.value) {
    loading.value = false;
    finished.value = true;
    return;
  }

  pageNum.value++;
  emit("loadMore", { pageNum: pageNum.value, pageSize: pageSize.value });
};

const goActivity = (path, id) => {
  router.push({
    path: path ? path : "/detail",
    query: {
      id,
    },
  });
};

onMounted(() => { });
</script>

<template>
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" style="margin-top: 10px">
    <div class="container" v-for="(item, idnex) in activity_list" :key="item.id">
      <div class="img-box">
        <img :src="item.cover" alt="" />
      </div>
      <footer>
        <div class="left">
          <p class="title">{{ item.title }}</p>
          <p class="date">{{ item.startTime }}-{{ item.endTime }}</p>
        </div>
        <div class="right" @click="goActivity(item.path, item.id)">
          进入活动
        </div>
      </footer>
    </div>
  </van-list>

  <div style="height: 100px"></div>
</template>

<style scoped lang="less">
@import url("@/styles/components/home/ActivityList");
</style>
